<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>网页布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
    
    /* css初始化 */
			h1,h2,h3,h4,h5,h6,body{
				 margin: 0;
				 padding:0;
			}
            .box{
                width: 980px;
                height: 700px;
                background-color: #DBDBE0;
                margin: 0 auto;


            }
            .header{
                height: 50px;
                background-color: brown;
            }

          .container{
              height: 600px;
              background-color: #F1CAF5;

          }

          .contet{
              width: 680px;
              height: 600px;
              background-color:blue;
              float: left;
          }
          .sidebar{
              width: 300px;
              height: 600px;
              background-color: chartreuse;
              float: right;

          }
          .foot{
              height: 50px;
              background-color: teal;
          }

    </style>
</head>
<body>
      <!-- 主体的盒子 -->
    <div class="box">
                <!-- 头部开始 -->
        <div class="header">头部</div>

        <!-- 内容部分 -->
        <div class="container">
          <div class="contet">左边</div>
          <div class="sidebar">右边</div>

        </div>
      <div class="foot">底部</div>








    </div>

</body>
</html>